<!--
 * @Author: yuqy
 * @Date: 2022-11-09 15:53:04
 * @LastEditors: yuqy
 * @LastEditTime: 2023-06-14 15:22:12
 * @Descripttion: -
-->
<template>
  <div class="svg_wrap">
    <svg class="icon" fill="none" height="128" width="128" viewBox="0 0 48 12" xmlns="http://www.w3.org/2000/svg">
      <rect width="3" height="12" rx="1" :fill="setFillColor(1)"></rect>
      <rect x="5" width="3" height="12" rx="1" :fill="setFillColor(5)"></rect>
      <rect x="10" width="3" height="12" rx="1" :fill="setFillColor(10)"></rect>
      <rect x="15" width="3" height="12" rx="1" :fill="setFillColor(20)"></rect>
      <rect x="20" width="3" height="12" rx="1" :fill="setFillColor(35)"></rect>
      <rect x="25" width="3" height="12" rx="1" :fill="setFillColor(50)"></rect>
      <rect x="30" width="3" height="12" rx="1" :fill="setFillColor(70)"></rect>
      <rect x="35" width="3" height="12" rx="1" :fill="setFillColor(80)"></rect>
      <rect x="40" width="3" height="12" rx="1" :fill="setFillColor(90)"></rect>
      <rect x="45" width="3" height="12" rx="1" :fill="setFillColor(100)"></rect>
    </svg>
  </div>
</template>
<script>
/* eslint-disable */

export default {
  name: "SVG_Audio",
  props: {
    level: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      fillColor: "#515151", // 默认填充色
      activeFillColor: "#1afa29",
      fillErrorColor: "red"
    }
  },
  mounted() {},
  created() {},
  destroyed() {},
  methods: {
    setFillColor(num) {
        if (this.level * 1 >= num) {
            return this.activeFillColor
        }
        return this.fillColor
    },
    getFastBoardGainToken() {},
    /**
     * @name: 控制书写
     * @msg:
     * @return {*}
     */
    controlWrite() {},
    /**
     * @name: 创建画板
     * @msg:
     * @param {*} data
     * @param {*} div
     * @return {*}
     */

    async mountFastboard(data, div) {}
  }
}
</script>

<style lang="less" scoped >
.svg_wrap {
  min-width: 8vw;
  vertical-align: baseline;
  width: 8vw;
  height: 2vw;
  display: inline-block;
  svg {
    width: 100%;
    height: 100%;
  }
}
</style>
